<template>
  <transition name="fade">
    <div>
      <img style="z-index: -1;position: absolute;left: 0;right: 0;top:0;bottom: 0;width: 100vw"
           :src="`/img/background.jpg`"  :onerror="defaultImg"
      >
      <div class="dialog-content">
        <div style="width: 100vw;height: 100vh;position: relative" >
<!--          <img style="position:absolute;width: 100%;" :src="inputImg" alt="">-->
          <div style="position: fixed;top: 88vw;left: 0;right: 0;text-align: center">
            <el-input style="width: 60vw;" v-model="name" placeholder="请输入姓名"></el-input>
            <el-input type="number" style="width: 60vw;margin-top: 10px" v-model="phone" placeholder="请输入电话"></el-input>
          </div>
<!--          <img :src="btnl" style="width: 180px" alt="" class="btn_save" @click="saveInfo">-->
<!--          <img :src="btnl" style="width: 180px" alt="" class="btn_save" @click="saveInfo">-->
          <div style="width: 100%;height: 100px;text-align: center;display: flex;position: fixed;bottom: 0">
            <div style="flex: 1">
              <img :src="btn3" alt="" style="width: 150px;margin: 0 10px" @click="goback">
            </div>
            <div style="flex: 1">
              <img :src="btnl" alt="" style="width: 150px;margin: 0 10px" @click="saveInfo">
            </div>
          </div>
        </div>

<!--        <img :src="close" style="width: 40px;height: 55px;position: fixed;right: 20px;top: 20px; z-index: 9999" alt="" @click="showDialog = !showDialog">-->
      </div>
    </div>
  </transition>
</template>

<script>
import close from '@/assets/btn13.png'
import input from "@/assets/input.png";
import btnl from '@/assets/btn5.png'
import btn3 from '@/assets/btn2.png'

import {saveAppointment} from "@/api/api";

export default {
name: "appointment",
  data(){
    return {
      close: close,
      inputImg: input,
      btnl:btnl,
      name: '',
      phone: '',
      defaultImg: 'this.src="' + require('@/assets/MG410.png') + '"',
      btn3: btn3
    }
  },
  methods:{
    saveInfo(){

      if(!this.name || !this.phone){
        this.$alert("请输入用户信息", "嘉亿中心")
        return
      }
      if(!this.checkTel(this.phone)){
        this.$alert('电话号码输入不正确！', "嘉亿中心")
        return;
      }

      let openid =  window.localStorage.getItem("openid")
      saveAppointment(openid,this.name,this.phone).then(success => {
        if(success.data.message){
          this.$alert(success.data.message,"嘉亿中心")
          return;
        }
        this.$alert("预约成功", "嘉亿中心", {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push("/")
          }
        })

      })
    },
    goback(){
      this.$router.push("/")
    },
    checkTel(tel) {
      var  mobile = /^1[3456789]\d{9}$/ , phone = /^0\d{2,3}-?\d{7,8}$/;
      return  mobile.test(tel) || phone.test(tel);
    },
  }
}
</script>

<style scoped>
.dialog-cover {
  background-color: rgba(0, 0, 0, 0.4);
}
.fullscreen {
  position: fixed;
  left: 0;right: 0;top:0;bottom: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.dialog-content{
  position: fixed;
  left: 0;right: 0;top:0;bottom: 0;
}
.btn_save {
  position: absolute;
  bottom: 88px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
</style>
